<template>
	<view class="cart" v-if="cart.length">
		<!-- 收货地址 -->
		<Address></Address>
		<view class="cart-title">
			<uni-icons type="shop" size="18"></uni-icons>
			<text>购物车</text>
		</view>
		<!-- 商品列表 -->
		<uni-swipe-action>
			<block v-for="(item,i) in cart" :key="i">
				<uni-swipe-action-item :right-options="options" @click="delGoods(item)">
					<GoodsItem  :item="item"></GoodsItem>
				</uni-swipe-action-item>
			</block>
		</uni-swipe-action>
		<!-- 结算页面 -->
		<view class="settle">
			<MySettle></MySettle>
		</view>
	</view>
	<!-- 购物车空白页面显示 -->
	<view class="empty-cart" v-else>
		<image src="../../static/beauty.jpeg" mode=""></image>
		<text>空空如也</text>
	</view>
</template>

<script>
	import MySettle from '../../components/my-settle/my-settle.vue'
	import Address from '@/components/my-address/my-address'
	import GoodsItem from '@/components/goods-item'
	import badge from '../../mixins/cart-badge.js'
	import { mapGetters } from 'vuex'
	export default {
		mixins: [badge],
		data() {
			return {
				options:[ 
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			}
		},
		computed: {
			cart() {
				return this.$store.state.cart.cart
			}
		},
		components: {
			GoodsItem,
			Address,
			MySettle
		},
		methods: {
			delGoods(obj) {
				this.$store.commit('cart/delGoods', obj)
			}
		}
	}
</script>

<style scoped lang="scss">
.cart {
	padding-bottom: 100rpx;
}	
.cart-title {
	display: flex;
	align-items: center;
	padding: 10rpx;
	line-height: 70rpx;
	border: 2px sold #ccc;
	background-color: #fff;
	text {
		font-size: 30rpx;
		margin-left: 15rpx;
	}
}
.settle {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100rpx;
}
.empty-cart {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 1134rpx;
	align-items: center;
	image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}
	text {
		margin-top: 10rpx;
	}
}
</style>
